<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import{getProductNewSignContractAmount} from '@/api/region_jsc.js'
export default {
  mixins: [resize],
  props: {
    listQuery:{
      type:Object,
       default: ()=>{
       }
     
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      
      chart: null,
      list:[],
    }
  },
  mounted() {
     this.getList();
   
   
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
 methods: {
      handleClose(){
      this.editDisabled = false;
    },
    getAll(){
        this.getList();
        this.initChart()
    },
    getList(){
      getProductNewSignContractAmount(this.listQuery).then(res=>{
       // this.list=res.data.data;
         this.list = res.data.data.map(iterator => {
          return {
            value: iterator.contractAmount,
            name: iterator.productTypeName
          }
        }) ;
              this.$nextTick(() => {
            this.initChart()
          });
      })
    },
    initChart() {
      
      this.chart = echarts.init(this.$el, 'macarons')
      let _self=this;
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
         left:'40',
           orient: 'vertical',
          top: '20',
          data: ['基于高校邦的课程运营服务', '精品在线开放课程产品', '课程拍摄与制作服务']
        },
         color:['#FF89B0','#FFCF5A','#6EF3ED'],
        series: [
          {
            name: '产品销售金额数据',
            type: 'pie',
              radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '14',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            // radius: [15, 95],
            center: ['70%', '60%'],
            data:_self.list,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>
